import { Card, Modal, Button } from "antd";
import {
	BellOutlined,
	ClockCircleOutlined,
	EyeOutlined,
} from "@ant-design/icons";
import { useState, useRef, useEffect } from "react";
import "./NotificationCard.less";

interface NotificationCardProps {
	title: string;
	content: string;
	createtime: number;
	onClick?: () => void;
}

const NotificationCard = ({
	title,
	content,
	createtime,
	onClick,
}: NotificationCardProps) => {
	const [isModalVisible, setIsModalVisible] = useState(false);
	const [isContentOverflow, setIsContentOverflow] = useState(false);
	const contentRef = useRef<HTMLDivElement>(null);

	useEffect(() => {
		if (contentRef.current) {
			setIsContentOverflow(
				contentRef.current.scrollHeight > contentRef.current.clientHeight,
			);
		}
	}, [content]);

	const showModal = (e: React.MouseEvent) => {
		e.stopPropagation();
		setIsModalVisible(true);
	};

	return (
		<>
			<Card
				bordered={false}
				className="notification-card bg-gradient-to-br from-blue-50 via-blue-100 to-blue-50"
				onClick={onClick}
			>
				<div className="flex items-start">
					<div className="icon-container flex-shrink-0">
						<div className="notification-icon">
							<BellOutlined className="text-blue-600 text-xl" />
						</div>
					</div>
					<div className="flex-1 min-w-0">
						<div className="flex items-center justify-between mb-3">
							<span className="title truncate mr-4">{title}</span>
							<span className="time-tag">
								<ClockCircleOutlined />
								{new Date(createtime * 1000).toLocaleString("zh-CN")}
							</span>
						</div>
						<div className="flex items-start justify-between">
							<div ref={contentRef} className="content line-clamp-2">
								{content}
							</div>
							<Button
								type="text"
								className="detail-button"
								onClick={showModal}
								icon={<EyeOutlined />}
							>
								查看详情
							</Button>
						</div>
					</div>
				</div>
			</Card>

			<Modal
				title={
					<div className="flex items-center gap-3">
						<BellOutlined className="text-blue-500" />
						<span>{title}</span>
					</div>
				}
				open={isModalVisible}
				onCancel={() => setIsModalVisible(false)}
				footer={[
					<Button key="close" onClick={() => setIsModalVisible(false)}>
						关闭
					</Button>,
				]}
				width={600}
				className="notification-modal"
			>
				<div className="flex flex-col gap-4">
					<div className="text-gray-600 text-base leading-relaxed whitespace-pre-wrap">
						{content}
					</div>
					<div className="flex items-center text-gray-400 text-sm bg-gray-50 px-4 py-2 rounded-lg">
						<ClockCircleOutlined className="mr-2" />
						{new Date(createtime * 1000).toLocaleString("zh-CN")}
					</div>
				</div>
			</Modal>
		</>
	);
};

export default NotificationCard;
